<template>
  <div class="image-cropper-modal">
    <el-dialog 
      :visible="visible"
      :append-to-body="true"
      :close-on-click-modal="false"
      :title="'裁剪图片'"
      width="700"
      class="image-cropper-dialog"
      @close="visible = false"
    >
      <VueCropper
        ref="imageCropper"
        :img="url"
        :output-size="clipOption.outputSize"
        :output-type="clipOption.outputType"
        :info="clipOption.info"
        :can-scale="clipOption.canScale"
        :auto-crop="clipOption.autoCrop"
        :auto-crop-width="clipOption.autoCropWidth"
        :auto-crop-height="clipOption.autoCropHeight"
        :fixed="clipOption.fixed"
        :fixed-box="clipOption.fixedBox"
        :fixed-number="clipOption.fixedNumber"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button v-t="'取消'" class="common-btn cancel" @click="onCancel" />
          <el-button v-t="'裁剪'" class="common-btn confirm" type="primary" @click="onConfirm" />
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { VueCropper } from 'vue-cropper';
export default {
  name: 'ImageCropperModal',
  components: {
    VueCropper
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    },
    autoCropWidth: {
      type: Number,
      default: 1024
    },
    autoCropHeight: {
      type: Number,
      default: 1024
    }
  },
  data() {
    return {
      clipOption: {
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 1024, // 默认生成截图框宽度
        autoCropHeight: 1024, // 默认生成截图框高度
        fixedBox: false, // 截图框大小固定 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: false, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove: true
      }
    }
  },
  methods: {
    onCancel() {
      this.$emit('cancel');
    },
    onConfirm() {
      this.$refs.imageCropper.getCropBlob((blob) => {
        this.$emit('confirm', blob);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.image-cropper-dialog {
  .vue-cropper {
    height: 600px;
  }
}
</style>
